<template>
  <div>
    <div ref="container"></div>
    <div id="panel" ref="panel"></div>
  </div>
</template>

<script>
  import AMap from 'AMap'
  import AMapUI from 'AMapUI'
    export default {
      name: "mapComm",
      props:{
        dataList:Array,//路径data
        iconMarker:String,//标点图标
        iconNavg:String,//巡航图标
      },
      methods:{
        init(){
          let that = this;
          let map = new AMap.Map(this.$refs.container, {
            zoom:17,//级别
            center: that.dataList[0].position,//中心点坐标
            resizeEnable: true,
            defaultCursor: 'pointer',
            showBuildingBlock: false,
            viewMode:'3D'//使用3D视图
          });

          /*let infoWindow = new AMap.InfoWindow({ //创建信息窗体
            isCustom: true,  //使用自定义窗体
            content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
            offset: new AMap.Pixel(16, -45)
          });
          let onMarkerClick  =  function(e) {
            infoWindow.open(map, e.target.getPosition());//打开信息窗体
          }*/
          //路线数组
          let lineList = [];
          //创建点数组
          let markerList = [];
          this.dataList.forEach((item,index)=>{
            //创建点标记
            let marker = new AMap.Marker({
              position: item.position,//标记地点
              icon:that.iconMarker?new AMap.Icon({
                image: that.iconMarker,
                size: new AMap.Size(22, 28),  //图标所处区域大小
                imageSize: new AMap.Size(22,28) //图标大小
              }):"",    // 添加 Icon 图标 URL
              title:item.title||"",
            })
            //给点标记添加点击事件
            //marker.on('click',onMarkerClick);//绑定click事件
            markerList.push(marker)
            lineList.push(item.position)
          })
          map.add(markerList);//添加到地图

         /* //画线
          let polyline = new AMap.Polyline({
            zIndex: 1,
            path: lineList,          //设置线覆盖物路径
            strokeColor: "#3366FF", //线颜色
            strokeWeight: 10,        //线宽
            strokeStyle: "solid",   //线样式
          });
          map.add(polyline);*/
          //计算路径的实际距离
          let dis = AMap.GeometryUtil.distanceOfLine(lineList);
          //绘制线路巡航器
          AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
            if (!PathSimplifier.supportCanvas) {
              alert('当前环境不支持 Canvas！');
              return;
            }

            let pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: map, //所属的地图实例
              getPath: function(pathData, pathIndex) {
                return pathData.path;
              },
              getHoverTitle: function(pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }
                return pathData.name + '，点数量' + pathData.path.length;
              },
              renderOptions: {
                renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
                pathTolerance: 2,
                keyPointTolerance: 0,
                pathLineSelectedStyle: {
                  lineWidth: 6,
                  strokeStyle: '#C11534',
                  borderWidth: 1,
                  borderStyle: '#cccccc',
                  dirArrowStyle: true
                },
              }
            });

            window.pathSimplifierIns = pathSimplifierIns;
            //设置数据
            pathSimplifierIns.setData([{
              name: '线路',
              path: lineList,
            }]);

            //对第一条线路（即索引 0）创建一个巡航器
            let navg1 = pathSimplifierIns.createPathNavigator(0, {
              loop: true, //循环播放
              speed: 10000, //巡航速度，单位千米/小时
              pathNavigatorStyle: that.iconNavg?{
                autoRotate: false, //禁止调整方向
                pathLinePassedStyle: null,
                width: 30,
                height: 24,
                zIndex: 100,
                content: PathSimplifier.Render.Canvas.getImageContent(that.iconNavg, onload, onerror),
                strokeStyle: null,
                fillStyle: null
              }:'',
            });
            navg1.start();
          });

          /*
          * 货车路径规划为收费服务接口，目前提供免费配额每日调用次数上限100次，QPS上限1。
          * 如果您有更高配额要求或合作意向，请通过工单系统 提交商务合作工单 进行沟通
          * */
          /*货车路线规划收费*/
          map.plugin('AMap.DragRoute', function () {
            // lineList 是驾车导航的起、途径和终点，最多支持16个途经点
            let route = new AMap.DragRoute(map, lineList, AMap.DrivingPolicy.LEAST_FEE)
            // 查询导航路径并开启拖拽导航
            route.search()
          })
          //map.remove(marker)
        },
      },
      mounted() {
        this.init();
      }
    }
</script>

<style scoped>
  div{
    height: 100%;
    width: 100%;
  }
</style>
